<template>
    <div id="signin">
        <div class="cover">
            <div id="leftPanel">
                <div id="leftTop">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <div id="leftBottom">
                    <ul>
                        <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                        </li>
                        <li>
                           <i class="fa fa-university" aria-hidden="true"></i>
                            <span>彩票管理</span>
                        </li>
                        <li>
                            <i class="fa fa-cog" aria-hidden="true"></i>
                            <span>彩票工具</span>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            <span>数据图表</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="rightPanel">
            	<el-form :model="userInfo" :rules="rules" ref="userInfo">
	                <ul>
	                    <li style="color: white;font-family: arial;font-size: 40px;">可米彩票</li>
	                    <li>
	                    	<el-form-item prop="accountName">
	                        	<el-input placeholder="请输入用户名" class="userInput" v-model="userInfo.accountName"/>
	                        </el-form-item>
	                    </li>
	                    <li>
	                    	<el-form-item prop="password">
		                        <el-input placeholder="请输入密码"
		                         type="password"
		                         class="userInput"
		                         v-model="userInfo.password"
		                         />
		                    </el-form-item>
	                    </li>
	                    <li style="text-align:left;padding: 0;">
	                    	<el-switch 
	                    		active-color="#13ce66"
	                    		inactive-color="#ff4949"
	                    		v-model="remember"
	                    		></el-switch>
	                    	<span style="color: white;">记住密码</span>
	                    </li>
	                    <li>
	                    	<el-button type="primary" @click="signin">登录</el-button>
	                    </li>
	                </ul>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
	export default {
    data(){
        return {
            userInfo: {
                accountName: 'zmt',
                password: '12345'
            },
            // 校验规则
            rules: {
                // 校验用户名的规则
                accountName: [
                    /*
                        required: true  必填
                        message: 不符合规则的时候,弹出的提示
                        trigger: 在什么时候执行这个校验
                    */ 
                    {required:true,message:'用户名不能为空',trigger:'blur'},
                    {min:2,max:20,message:'字符不能少于2个字符',trigger:'blur'}
                ],
                // 密码的验证规则
                password: [
                    {required:true,message:'密码不能为空',trigger:'blur'},
                    {min:5,max:20,message:'密码不能少于5个字符',trigger:'blur'}
                ]
            },
            remember: true
        }
    },
    methods: {
        signin(){
            this.$refs['userInfo'].validate((valid) => {
            if (valid) {
                // 当所有的验证通过之后,执行这个代码块
                this.$http.post(this.$apis.signIn,this.userInfo)
                .then((resp)=>{
                    // 登录成功,将返回的数据存储到localStorage
                    if(resp.data.success){
                        localStorage.setItem('remember',this.remember);
                        localStorage.setItem('token',resp.data.token);
                        localStorage.setItem('response',JSON.stringify(resp.data.response));
                        // 登录成功跳转到原来想要跳转的页面(组件)
                        if(this.$route.query.redirect){
                            this.$router.push(this.$route.query.redirect);
                        }else{
                            // 如果没有重定向的路径,则默认跳转到Home路径下
                            this.$router.push('/Home')
                        }
                    }else{
                    //登录失败,弹出提示,使用用登录失败
                      this.$message.error('登录失败,请重新登录');
                    }
                })
            } else {
                // 如果还有未通过验证的,则执行该代码块
                // console.log('error submit!!');
                console.log("还有未通过验证的,请注意");
                return false;
            }
            });
           
        }
    }
}
</script>
<style lang="scss" scoped>
    #signin {
        width: 100%;
        height: 100%;
        background:url('../../assets/loginBG.jpg') no-repeat;
        background-size: cover;
        .cover {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display:flex;
            flex-direction:row;
            #leftPanel {
                width: 80%;
                height: 100%;
                #leftTop {
                    width: 100%;
                    height: 70%;
                    display: flex;
                    justify-content: center;
                    align-items: center; 
                    .circle {
                        width: 200px;
                        height: 200px;
                        border-radius: 50%;
                        &:nth-child(1){
                            position: absolute;
                            top: 20%;
                            background:rgba(240, 197, 158, 0.5);
                        }
                        &:nth-child(2){
                            position: absolute;
                            top: 37%;
                            left: 36%;
                            background:rgba(85, 212, 191,0.5);
                        }
                        &:nth-child(3){
                            position: absolute;
                            left: 27%;
                            top: 37%;
                            background:rgba(82, 89, 197,0.5);
                        }
                    }
                }
                #leftBottom {
                    width: 100%;
                    height: 30%;
                    ul {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction:row;
                        justify-content: center;
                        li {
                            display: flex;
                            margin: 40px;
                            flex-direction: column;
                            color: rgba(255, 255, 255, 0.5);
                            span {
                                margin-top:20px;
                                text-align: center;
                            }
                            i {
                                font-size: 60px;
                            }
                        }
                    }
                }
            }
             #rightPanel{
                width: 25%;
                height: 100%;
                background: rgba(0,0,0,0.7);
                ul {
                	margin-top: 40%;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    li {
                        text-align: center;
                        margin-bottom: 20px;
                        width: 80%;
                        &:nth-child(2){
                        	margin-top: 20px;
                        }
                        .userInput {
                            width: 100%;
                            text-align: center;
                            & > /deep/.el-input__inner {
                                background:rgba(0,0,0,0);
                                width: 100%;
                            }
                        }
                        
                    }
                    button{
                    	width: 100%;
                    }
                    
                }
            }
        }
    }
</style>
